import * as React from "react"
import { observer, inject } from "mobx-react"

import { View, ViewStyle, Text, ScrollView, TouchableOpacity } from "react-native"
import { px2dp } from "../../utils"
import { color } from "../../theme/base/color"
import { Line } from "../../components/line"
import NoneDataIcon from "./NoneDataIcon"

const containerStyle: ViewStyle = {
  marginTop: px2dp(8),
  marginHorizontal: px2dp(16)
}

const RecordItemStyle: ViewStyle = {
  paddingTop: px2dp(14),
  paddingBottom: px2dp(14),
  marginBottom: px2dp(14),
  backgroundColor: color.palette.white,
  borderRadius: px2dp(8)
}

const cardHeadeStyle: ViewStyle = {
  borderLeftColor: color.themeColor,
  alignItems: "center",
  borderLeftWidth: px2dp(2),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14),
  flexDirection: "row",
  justifyContent: "space-between"
}

const cardHeadeLeftStyle: ViewStyle = {}

const cardHeadeRightStyle: ViewStyle = {}

const LineStyle: ViewStyle = {
  paddingTop: px2dp(14),
  marginLeft: px2dp(14),
  paddingBottom: px2dp(14)
}

const matchItemStyle: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  paddingTop: px2dp(5),
  paddingBottom: px2dp(5),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14)
}

const matchConfirmedStyle: ViewStyle = {
  position: "absolute",
  right: px2dp(14),
  bottom: px2dp(30)
}

// 时间选项卡组件
function ItemList(props: any) {
  return (
    <View style={{ flex: 1 }}>
      {props.listData.length !== 0 ? (
        <ScrollView contentContainerStyle={containerStyle}>
          {props.listData.map((data: any, index: number) => {
            return <RecordItem {...props} key={index} typeId={12} recordId={22} />
          })}
        </ScrollView>
      ) : null}
      <NoneDataIcon listData={props.listData} title="无结算注单" subTitle="请您确认您的注单状态" />
    </View>
  )
}

// 投注记录条目组件
interface RecordItemProps {
  history: any
  typeId: any
  recordId: any
}
class RecordItem extends React.Component<RecordItemProps, {}> {
  toRecordDetail(id: number | string, type: number | string) {
    this.props.history.push({
      pathname: "/mineBetRecordDetailScreen",
      query: {
        id: id,
        type: type
      }
    })
  }
  render() {
    return (
      <TouchableOpacity
        activeOpacity={0.2}
        onPress={() => this.toRecordDetail(this.props.typeId, this.props.recordId)}
      >
        <View style={RecordItemStyle}>
          <View style={cardHeadeStyle}>
            <View style={cardHeadeLeftStyle}>
              <Text>澳大利亚维多利亚国家超级联赛</Text>
            </View>
            <View style={cardHeadeRightStyle}>
              <Text style={{ color: color.themeColor }}>详情 ></Text>
            </View>
          </View>
          <View style={LineStyle}>
            <Line />
          </View>
          <View>
            <View style={matchItemStyle}>
              <Text>维多利亚-0.5</Text>
              <Text style={{ color: color.themeColor }}>@0.8</Text>
            </View>
            <View style={matchItemStyle}>
              <Text style={{ color: color.info, fontSize: px2dp(12) }}>滚球 让球（0:0）</Text>
            </View>
            <View style={matchItemStyle}>
              <Text style={{ color: color.info, fontSize: px2dp(12) }}>维多利亚 v 瓦达克斯家</Text>
            </View>
            <View style={matchItemStyle}>
              <View style={{ flexDirection: "row" }}>
                <Text style={{ color: color.info }}>本金</Text>
                <Text>$10.00</Text>
              </View>
            </View>
            <View style={matchConfirmedStyle}>
              <Text style={{ fontSize: 12, color: color.info }}>已确认</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

export interface UnsettlementScreenProps {
  rootStore: any
  history: any
  listData: any
}

export interface UnsettlementScreenState {
  testData: any
}

@inject("rootStore")
@observer
class UnsettlementScreen extends React.Component<UnsettlementScreenProps, UnsettlementScreenState> {
  state = {
    testData: []
  }
  componentDidMount() {
    // 挂载组件,此生命周期请求数据
    console.log(this.state)
  }
  // 已结算/未结算切换
  settlementQuest(type: any) {
    console.log(type)
    // 请求数据
    // loading
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 时间筛选选项卡 */}
        <ItemList listData={this.props.listData} {...this.props} />
      </View>
    )
  }
}

export default UnsettlementScreen
